<template>
  <div class="user-detail">
    <!-- 顶部背景和用户信息 -->
    <div class="header">
      <div class="background-image">
        <img :src="userInfo.coverImage" alt="背景图" />
      </div>
      <div class="back-button" @click="router.back()">
        <i class="icon-back"></i>
      </div>
      <div class="user-basic-info">
        <img :src="userInfo.avatar" :alt="userInfo.name" class="avatar" />
        <h1 class="name">{{ userInfo.name }}</h1>
        <p class="bio">{{ userInfo.bio }}</p>
        <div class="stats">
          <div class="stat-item">
            <span class="number">{{ userInfo.followingCount }}</span>
            <span class="label">关注</span>
          </div>
          <div class="stat-item">
            <span class="number">{{ userInfo.followersCount }}</span>
            <span class="label">粉丝</span>
          </div>
          <div class="stat-item">
            <span class="number">{{ userInfo.likesCount }}</span>
            <span class="label">获赞</span>
          </div>
        </div>
        <div class="action-buttons">
          <button 
            class="follow-btn"
            :class="{ following: userInfo.isFollowing }"
            @click="toggleFollow"
          >
            {{ userInfo.isFollowing ? '已关注' : '关注' }}
          </button>
          <button class="message-btn" @click="startChat">
            <i class="icon-message"></i>
            发消息
          </button>
        </div>
      </div>
    </div>

    <!-- 选项卡 -->
    <div class="tabs">
      <div 
        v-for="tab in tabs" 
        :key="tab.id"
        class="tab"
        :class="{ active: currentTab === tab.id }"
        @click="currentTab = tab.id"
      >
        {{ tab.name }}
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="content">
      <!-- 发布内容 -->
      <div v-if="currentTab === 'posts'" class="posts-grid">
        <div 
          v-for="post in userInfo.posts" 
          :key="post.id"
          class="post-item"
          @click="showPostDetail(post)"
        >
          <img :src="post.image" :alt="post.description" />
          <div class="post-info">
            <span class="likes">
              <i class="icon-heart"></i>
              {{ post.likes }}
            </span>
          </div>
        </div>
      </div>

      <!-- 商品列表 -->
      <div v-if="currentTab === 'products'" class="products-grid">
        <div 
          v-for="product in userInfo.products" 
          :key="product.id"
          class="product-item"
          @click="showProductDetail(product)"
        >
          <img :src="product.image" :alt="product.name" />
          <div class="product-info">
            <h3>{{ product.name }}</h3>
            <p class="price">¥{{ product.price }}</p>
            <p class="sales">已售 {{ product.sales }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 选项卡配置
const tabs = [
  { id: 'posts', name: '发布内容' },
  { id: 'products', name: '商品列表' }
]

const currentTab = ref('posts')

// 模拟用户数据
const userInfo = ref({
  id: route.params.id,
  name: '宠物之家',
  avatar: '/avatars/store.jpg',
  coverImage: '/covers/store-cover.jpg',
  bio: '专业宠物用品店，提供优质宠物用品和专业服务',
  followingCount: 128,
  followersCount: 3642,
  likesCount: 12580,
  isFollowing: false,
  posts: [
    {
      id: 1,
      image: '/posts/1.jpg',
      description: '新品上架：进口猫粮',
      likes: 234
    },
    // ... 更多发布内容
  ],
  products: [
    {
      id: 1,
      name: '进口猫粮 10kg',
      price: 299,
      sales: 1280,
      image: '/products/1.jpg'
    },
    // ... 更多商品
  ]
})

const toggleFollow = () => {
  userInfo.value.isFollowing = !userInfo.value.isFollowing
  // 调用关注/取消关注 API
}

const startChat = () => {
  router.push(`/chat/${userInfo.value.id}`)
}

const showPostDetail = (post) => {
  router.push(`/post/${post.id}`)
}

const showProductDetail = (product) => {
  router.push(`/product/${product.id}`)
}
</script>

<style scoped>
.user-detail {
  min-height: 100vh;
  background: var(--color-white);
}

.header {
  position: relative;
  padding-bottom: 20px;
}

.background-image {
  height: 200px;
  overflow: hidden;
}

.background-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.back-button {
  position: absolute;
  top: 20px;
  left: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.user-basic-info {
  margin-top: -60px;
  padding: 0 16px;
  text-align: center;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 4px solid var(--color-white);
  margin-bottom: 16px;
}

.name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
}

.bio {
  font-size: 14px;
  color: var(--color-gray);
  margin-bottom: 16px;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.number {
  font-size: 18px;
  font-weight: bold;
}

.label {
  font-size: 12px;
  color: var(--color-gray);
}

.action-buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.follow-btn, .message-btn {
  padding: 8px 24px;
  border-radius: 20px;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.follow-btn {
  background: var(--color-accent);
  color: var(--color-white);
}

.follow-btn.following {
  background: var(--color-gray);
}

.message-btn {
  background: var(--color-secondary);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 4px;
}

.tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 16px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  font-size: 14px;
  color: var(--color-gray);
  cursor: pointer;
}

.tab.active {
  color: var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}

.content {
  padding: 16px;
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.post-item {
  position: relative;
  aspect-ratio: 1;
}

.post-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  background: linear-gradient(transparent, rgba(0,0,0,0.5));
  color: var(--color-white);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.product-item {
  background: var(--color-white);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.product-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-info {
  padding: 12px;
}

.product-info h3 {
  font-size: 14px;
  margin-bottom: 8px;
}

.price {
  color: #ff6b6b;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.sales {
  font-size: 12px;
  color: var(--color-gray);
}
</style> 